<template>
	<view class="my-page">
		<view class="my-card u-flex u-row-between u-m-t-30" style="padding: 0;">
			<button class="getButton" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" >
				<text class="u-font-28" style="margin-left: 15rpx;">头像</text>
				<u-image :src="src == ''?'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/avatar2.png':src"
					width="82rpx" height="82rpx" shape="circle"></u-image>
			</button>
		</view>

		<label for="getname">
			<view class="my-card u-flex u-row-between u-m-t-30">
				<text class="u-font-28">名称</text>
				<input id="getname" class="inputFocus" v-model="nickname" type="text" placeholder="请输入昵称"
					style="text-align: right;" />
			</view>
		</label>
		<u-button class="block u-m-t-80" @click="handleSubmit" shape="circle" type="success">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				nickname: ''
			}
		},

		onLoad() {
			// 获取用户已有头像和昵称
			this.getUserInfo()
		},
		methods: {
			// 提交信息
			handleSubmit() {
				const that = this
				that.$http({
					url: that.api.user_edit,
					method: 'POST',
					data: {
						avatar: that.src ? that.src :
							'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/avatar2.png',
						nickname: that.nickname ? that.nickname : ''
					}
				}).then(res => {
					if (res.code == 1) {
						uni.reLaunch({
							url: '/pages/my/index'
						});
						uni.showToast({
							icon: 'success',
							title: '修改成功',
							duration: 2000
						});
					}

				})
			},

			onChooseAvatar(e){
				this.src = e.detail.avatarUrl
			},
			
			// 获取用户已有头像和昵称
			getUserInfo() {
				const that = this
				that.$http({
					url: that.api.user_info,
					method: 'get',
				}).then(res => {
					// console.log(res,'获取用户信息');
					if (res.code == 1) {
						that.src = res.data.avatar;
						that.nickname = res.data.nickname;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.getButton{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		background-color: unset;
		padding: 13rpx;
		padding-right: 15rpx;
	}
	button::after{
		border: none;
		outline: none;
	}
</style>